<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
        <title>Init/destroy and import/export - simple-datatables</title>
        <!-- DataTable Styles -->
        <link rel="stylesheet" href="../dist/css/style.css">
        <!-- Demo Styles -->
        <link rel="stylesheet" href="../demo.css">
        <style>
            .controls {
                padding: 0 10px;
            }

            button {
                border-radius: 6px;
                color: white;
                border: none;
            }

            .success {
                background-color: #1f8f4e;
            }
            .success:hover,
            .success:focus {
                background-color: #156537;
            }

            .danger {
                background-color: #982d22;
            }
            .danger:hover,
            .danger:focus {
                background-color: #5e1a12;
            }

            .primary {
                background-color: #2d84be;
            }
            .primary:hover,
            .primary:focus {
                background-color: #206491;
            }

            #hide.hidden {
                display: none;
            }
            #hide label {
                padding-left: 0.25em;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>
                <a href="../../">simple-datatables</a>
            </h1>
            <a href="../../documentation">Documentation</a>
            <a href="../">Demos</a>
        </header>

        <h2>Init/destroy and import/export</h2>
        <div class="controls">
            <button id="init" type="button" class="success main">Init</button>
            <button id="destroy" type="button" class="danger main">Destroy</button>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Select</th>
                    <th>Customer</th>
                    <th>Version</th>
                    <th data-type="date" data-format="DD.MM.YYYY">Planned upgrade</th>
                    <th>DB-Info</th>
                    <th>Website info</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td>
                        Test one <br>CCode: 33123
                    </td>
                    <td>7.1.5</td>
                    <td>26.11.2018</td>
                    <td>
                        Server: s1 <br>DB: db1
                    </td>
                    <td>
                        Websitename: Red <br>Node: 10
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        Test two <br>CCode: 12353
                    </td>
                    <td>7.1.5.2</td>
                    <td>26.11.2019</td>
                    <td>
                        Server: s1 <br>DB: db2
                    </td>
                    <td>
                        Websitename: Green <br>Node: 6
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        Test three <br>CCode: 33522
                    </td>
                    <td>7.1.6</td>
                    <td>01.01.2020</td>
                    <td>
                        Server: s2 <br>DB: db1
                    </td>
                    <td>
                        Websitename: Orange <br>Node: 5
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        Test four <br>CCode: 25512
                    </td>
                    <td>7.1.7</td>
                    <td>26.03.2021</td>
                    <td>
                        Server: s1 <br>DB: db3
                    </td>
                    <td>
                        Websitename: Blue <br>Node: 10
                    </td>
                </tr>
            </tbody>
        </table>

        <div id="hide">
            <strong>Column Visibility</strong>
            <div class="form-group" id="columns"></div>

            <br>

            <strong>Import / Export Data</strong>
            <div class="card-block">
                <div class="form-group">
                    <textarea name="" id="" cols="30" rows="2" placeholder="Paste your CSV or JSON string here..."></textarea>
                </div>
                <div class="form-group">
                    <button type="button" class="primary import" data-type="csv">Import CSV</button>
                    <button type="button" class="primary import" data-type="json">Import JSON</button>
                    <button type="button" class="success export" data-type="csv">Export CSV</button>
                    <button type="button" class="success export" data-type="sql">Export SQL</button>
                    <button type="button" class="success export" data-type="json">Export JSON</button>
                </div>
                <div class="form-group">
                    <small>
                        Note: The csv column delimiters and line delimiters are set to <code>","</code>
                        and <code>"\n"</code> respectively.
                    </small>
                </div>
            </div>
        </div>

        <!-- Custom Code -->
        <script type="module">
            import {DataTable, convertJSON, convertCSV, exportCSV, exportSQL, exportJSON} from "../dist/module.js"
            const createElement = (nodeName, attrs) => {
                const dom = document.createElement(nodeName)
                if (attrs && "object" == typeof attrs) {
                    for (const attr in attrs) {
                        if ("text" === attr) {
                            const text = document.createTextNode(attrs[attr])
                            dom.appendChild(text)
                        } else if ("html" === attr) {
                            dom.innerHTML = attrs[attr]
                        } else {
                            dom.setAttribute(attr, attrs[attr])
                        }
                    }
                }
                return dom
            }
            const checkboxes = document.getElementById("columns")
            const table = document.getElementsByTagName("table")[0]
            const textarea = document.getElementsByTagName("textarea")[0]
            const hidden = []
            const visible = []
            let inputs = []
            const datatable = new DataTable(table, {
                perPage: 5,
                columns: [
                    {
                        select: [1, 4, 5],
                        type: "html"
                    }
                ]
            })
            window.datatable = datatable
            const updateColumns = function() {
                datatable.columns.show(visible)
                datatable.columns.hide(hidden)
            }
            const setCheckboxes = function() {
                inputs = []
                while (visible.length) {
                    visible.pop()
                }
                while (hidden.length) {
                    hidden.pop()
                }
                checkboxes.innerHTML = ""
                datatable.data.headings.forEach((heading, i) => {
                    const checkbox = createElement("div", {
                        class: "checkbox"
                    })
                    const input = createElement("input", {
                        type: "checkbox",
                        id: `checkbox-${i}`,
                        name: "checkbox"
                    })
                    const label = createElement("label", {
                        for: `checkbox-${i}`,
                        html: heading.data
                    })
                    input.idx = i
                    if (datatable.columns.visible(i)) {
                        input.checked = true
                        visible.push(i)
                    } else {
                        if (hidden.indexOf(i) < 0) {
                            hidden.push(i)
                        }
                    }
                    checkbox.appendChild(input)
                    checkbox.appendChild(label)
                    checkboxes.appendChild(checkbox)
                    inputs.push(input)
                })
                inputs.forEach(input => {
                    input.onchange = function(_event) {
                        if (input.checked) {
                            hidden.splice(hidden.indexOf(input.idx), 1)
                            visible.push(input.idx)
                        } else {
                            visible.splice(visible.indexOf(input.idx), 1)
                            hidden.push(input.idx)
                        }
                        updateColumns()
                    }
                })
            }

            datatable.on("datatable.init", () => {
                setCheckboxes()
            })
            window.dt = datatable
            textarea.addEventListener("input", function(_event) {
                if (this.value.length) {
                    this.parentNode.classList.remove("error")
                }
            })
            document.querySelectorAll(".export").forEach(el => {
                el.addEventListener("click", _event => {
                    const type = el.dataset.type
                    const data = {
                        filename: `my-${type}`
                    }
                    if (type === "csv") {
                        data.columnDelimiter = ","
                    }
                    if (type==="csv") {
                        exportCSV(datatable, data)
                    } else if (type==="json") {
                        exportJSON(datatable, data)
                    } else if (type==="sql") {
                        exportSQL(datatable, data)
                    }

                })
            })
            document.querySelectorAll(".main").forEach(el => {
                el.addEventListener("click", _event => {
                    datatable[el.id]()
                    setTimeout(() => {
                        document.getElementById("hide").classList.toggle("hidden", !datatable.initialized)
                        table.classList.toggle("table", !datatable.initialized)
                    }, 10)
                })
            })
            document.querySelectorAll(".import").forEach(el => {
                el.addEventListener("click", _event => {
                    const type = el.dataset.type
                    const data = {
                        data: textarea.value
                    }
                    textarea.parentNode.classList.remove("error")
                    if (!data.data.length) {
                        textarea.parentNode.classList.add("error")
                        return false
                    }
                    if (type === "csv") {
                        const convertedData = convertCSV(data)
                        datatable.insert(convertedData)
                    } else if (type === "json") {
                        const convertedData = convertJSON(data)
                        datatable.insert(convertedData)
                    }

                })
            })
        </script>
    </body>
</html>
